<template>
   <div v-if="visible" class="panelDialog" :style="'width:' + width">
    <!-- 这里套用一层就可以避免外层居中的样式和animate动画冲突了 -->
    <div class="animate__animated animate__fadeInDown">
      <div class="dialog">
        <i class="closeBtn el-icon-close"></i>
        <p class="title" v-if="title">{{ title }}</p>  
        <slot></slot> 
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'LeDialog',
        data() {
      return {
        closed: false,
        key: 0
      };
    },
    props: {
      width: {
        type: String,
        default: "349px",
      },
      title: {
        type: String,
        default: ''
      },
      visible: {
        type: Boolean,
        default: false,
      },
      modal: {
        type: Boolean,
        default: true
      },
      center: {
        type: Boolean,
        default: false
      },
      customClass: {
        type: String,
        default: ''
      },
      fullscreen: Boolean
    },
    computed: {
       // 计算位置
      style() {
        let style = {};
        if (!this.fullscreen) {
          style.marginTop = this.top;
          if (this.width) {
            style.width = this.width;
          }
         }
        return style;
      }
    },
    watch: {
    visible(val) {
        if (val) {
        this.closed = false;
        this.$emit('open');
        this.$el.addEventListener('scroll', this.updatePopper);
        this.$nextTick(() => {
            this.$refs.dialog.scrollTop = 0;
        });
        if (this.appendToBody) {
            document.body.appendChild(this.$el);
        }
        } else {
        this.$el.removeEventListener('scroll', this.updatePopper);
        if (!this.closed) this.$emit('close');
        if (this.destroyOnClose) {
            this.$nextTick(() => {
            this.key++;
            });
        }
        }
    }
    },
        mounted() {
            if (this.visible) {
                this.rendered = true;
                // this.open();
                if (this.appendToBody) {
                  document.body.appendChild(this.$el);
                }
            }
        },
        methods: {
            afterEnter() {
                this.$emit('opened');
            },
            afterLeave() {
                this.$emit('closed');
            }
        }
    }
</script>

<style lang="scss" scoped>
.panelDialog {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 41, 99, 0.13);
 
  .dialog {
    width: 100%;
    min-height: 50px;
    padding: 10px 10px 0;
    box-sizing: border-box;
    position: relative;
    background-image: var(--cddk_dialog_bgCenter);
    background: rgb(202, 192, 192);
    border: 1px solid rgb(116, 114, 114);
    background-size: 100% auto; 
    .closeBtn {
      position: absolute;
      top: -22px;
      right: 10px;
      font-size: 20px;
      color: #00dcf5;
      cursor: pointer;
      z-index: 2;
    }
 
    .title {
      width: 100%;
      height: 24px;
      line-height: 24px;
      padding: 0 15px;
      box-sizing: border-box;
      position: absolute;
      top: -24px;
      left: 0;
      font-size: 16px;
      font-weight: 300;
      color: var(--cddk_dialog_title);
    } 
  }
}

</style>